<template>
  <div class="p-2">
    <div class="search" v-show="showSearch">
      <a-form ref="queryFormRef" :model="queryParams" layout="inline">
        <a-form-item label="流程名称" name="processName">
          <a-input v-model:value="queryParams.processName" placeholder="请输入流程名称" allow-clear style="width: 200px" @pressEnter="handleQuery" />
        </a-form-item>
        <a-form-item label="审批时间">
          <a-range-picker v-model:value="dateRange" format="YYYY-MM-DD" style="width: 308px" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleQuery">
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button @click="resetQuery">
              <template #icon><ReloadOutlined /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <a-card :bordered="false">
      <template #title>
        <a-row :gutter="10" class="mb8">
          <a-col :span="1.5">
            <a-button type="warning" @click="handleExport" v-hasPermi="['workflow:process:finishedExport']">
              <template #icon><DownloadOutlined /></template>
              导出
            </a-button>
          </a-col>
        </a-row>
      </template>
      <template #extra>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </template>

      <a-table :loading="loading" :dataSource="finishedList" :columns="columns" :pagination="false" rowKey="taskId">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a-tooltip title="详情">
                <a @click="handleDetails(record)" v-hasPermi="['workflow:process:query']">
                  <EyeOutlined />
                </a>
              </a-tooltip>
              <a-tooltip title="撤回" v-if="record.multiTask === false">
                <a @click="handleRevoke(record)" v-hasPermi="['workflow:process:revoke']">
                  <RollbackOutlined />
                </a>
              </a-tooltip>
            </a-space>
          </template>
        </template>
      </a-table>

      <a-pagination
        v-show="total > 0"
        :total="total"
        v-model:current="queryParams.pageNum"
        v-model:pageSize="queryParams.pageSize"
        @change="handlePageChange"
        @showSizeChange="handleSizeChange"
        show-size-changer
        show-quick-jumper
      />
    </a-card>
  </div>
</template>

<script setup name="Finished">
  import { processApi } from '/@/api/workflow/work';
  import { taskApi } from '/@/api/workflow/work';
  import { SearchOutlined, ReloadOutlined, DownloadOutlined, EyeOutlined, RollbackOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { ref, onMounted, getCurrentInstance } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const { proxy } = getCurrentInstance();

  const finishedList = ref([]);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const dateRange = ref([]);

  const queryFormRef = ref();

  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    processName: '',
  });

  const columns = [
    {
      title: '任务编号',
      dataIndex: 'taskId',
      key: 'taskId',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '流程名称',
      dataIndex: 'procDefName',
      key: 'procDefName',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '任务节点',
      dataIndex: 'taskName',
      key: 'taskName',
      align: 'center',
    },
    {
      title: '流程发起人',
      dataIndex: 'startUserName',
      key: 'startUserName',
      align: 'center',
    },
    {
      title: '接收时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: 180,
    },
    {
      title: '审批时间',
      dataIndex: 'finishTime',
      key: 'finishTime',
      align: 'center',
      width: 180,
    },
    {
      title: '耗时',
      dataIndex: 'duration',
      key: 'duration',
      align: 'center',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 180,
    },
  ];

  /** 查询待办列表 */
  const getList = async () => {
    loading.value = true;
    const res = await processApi.listFinishedProcess(queryParams.value);
    finishedList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  };

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  };

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value?.resetFields();
    dateRange.value = [];
    handleQuery();
  };

  /** 流程流转记录 */
  const handleDetails = (row) => {
    router.push({
      path: '/workflow/detail/' + row.procInsId,
      query: {
        processed: false,
      },
    });
  };

  /** 撤回任务 */
  const handleRevoke = async (row) => {
    const params = {
      procInsId: row.procInsId,
      taskId: row.taskId,
    };
    const res = await taskApi.revokeProcess(params);
    message.success('撤回成功');
    getList();
  };

  /** 导出按钮操作 */
  const handleExport = () => {
    proxy?.download(
      'workflow/process/finishedExport',
      {
        ...queryParams.value,
      },
      `finished_${new Date().getTime()}.xlsx`
    );
  };

  /** 分页处理 */
  const handlePageChange = (page, pageSize) => {
    queryParams.value.pageNum = page;
    queryParams.value.pageSize = pageSize;
    getList();
  };

  const handleSizeChange = (current, size) => {
    queryParams.value.pageNum = current;
    queryParams.value.pageSize = size;
    getList();
  };

  onMounted(() => {
    getList();
  });
</script>
